<template>
  <div class="step-container">
    <div class="steps">
      <div
        :class="['step-item', currentStep.step == item.step ? 'active' : '']"
        v-for="(item, index) in stepsList"
        :key="item.step"
        @click="handleStepClick(item)"
      >
        <div class="step-item-title">0{{ index + 1 }}. {{ item.step }}</div>
      </div>
    </div>
    <div class="step-content">{{ currentStep.content }}</div>
  </div>
  <div class="card-list">
    <Card v-for="item in skillList" :key="item.id" :item="item">
      <template #footer>
        <div class="footer" @click="handleClick(item)">详细</div>
      </template>
    </Card>
  </div>
  <DetailPopup v-model:show="showDetail" :data="currentItem" />
</template>
<script setup>
import { ref, onMounted } from 'vue';
import Card from './Card.vue';
import DetailPopup from './DetailPopup.vue';
import { skillList, stepsList } from '@/utils/guide';

const currentStep = ref(stepsList[0]);
const handleStepClick = (item) => {
  currentStep.value = item;
};

const showDetail = ref(false);
const currentItem = ref({});
const handleClick = (item) => {
  showDetail.value = true;
  currentItem.value = item;
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.step-container {
  padding: 32px;
  background-color: #f5f5fa;
  margin-bottom: 32px;
  border-radius: 8px;
  .steps {
    font-size: 26px;
    font-weight: bold;
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 18px;
    .step-item {
      padding: 12px 32px;
      background-color: #d6e7ff;
      border-radius: 30px;
      color: $primary-color;
      &.active {
        background-color: $primary-color;
        color: #fff;
      }
    }
  }
  .step-content {
    font-size: 26px;
    color: #666;
    line-height: 40px;
  }
}
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  .footer {
    text-align: right;
    font-size: 26px;
    color: $primary-color;
  }
}
</style>
